<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table></table>

    <script>
        let stuInfo = [
            [{
                    "stuID": "1",
                    "stuName": "bdy",
                    "stuAge": "18",
                    "stuGender": "male",
                    "stuScore": "100",
                    "className": "1班"
                },
                {
                    "stuID": "2",
                    "stuName": "luc",
                    "stuAge": "23",
                    "stuGender": "female",
                    "stuScore": "89",
                    "className": "1班"
                },
                {
                    "stuID": "3",
                    "stuName": "lc",
                    "stuAge": "17",
                    "stuGender": "male",
                    "stuScore": "93",
                    "className": "1班"
                },
                {
                    "stuID": "4",
                    "stuName": "xu",
                    "stuAge": "19",
                    "stuGender": "female",
                    "stuScore": "91",
                    "className": "1班"
                },
                {
                    "stuID": "5",
                    "stuName": "chao",
                    "stuAge": "20",
                    "stuGender": "male",
                    "stuScore": "95",
                    "className": "1班"
                }
            ],
            [{
                    "stuID": "1",
                    "stuName": "wf",
                    "stuAge": "18",
                    "stuGender": "female",
                    "stuScore": "85",
                    "className": "2班"
                },
                {
                    "stuID": "2",
                    "stuName": "xtf",
                    "stuAge": "19",
                    "stuGender": "female",
                    "stuScore": "91",
                    "className": "2班"
                },
                {
                    "stuID": "3",
                    "stuName": "xj",
                    "stuAge": "19",
                    "stuGender": "male",
                    "stuScore": "92",
                    "className": "2班"
                },
                {
                    "stuID": "4",
                    "stuName": "ls",
                    "stuAge": "21",
                    "stuGender": "male",
                    "stuScore": "94",
                    "className": "2班"
                },
                {
                    "stuID": "5",
                    "stuName": "xjs",
                    "stuAge": "22",
                    "stuGender": "female",
                    "stuScore": "89",
                    "className": "2班"
                }
            ],
            [{
                    "stuID": "1",
                    "stuName": "yaj",
                    "stuAge": "22",
                    "stuGender": "male",
                    "stuScore": "86",
                    "className": "3班"
                },
                {
                    "stuID": "2",
                    "stuName": "xj",
                    "stuAge": "25",
                    "stuGender": "female",
                    "stuScore": "89",
                    "className": "3班"
                },
                {
                    "stuID": "3",
                    "stuName": "xiz",
                    "stuAge": "24",
                    "stuGender": "female",
                    "stuScore": "80",
                    "className": "3班"
                },
                {
                    "stuID": "4",
                    "stuName": "yhq",
                    "stuAge": "26",
                    "stuGender": "female",
                    "stuScore": "92",
                    "className": "3班"
                },
                {
                    "stuID": "5",
                    "stuName": "npa",
                    "stuAge": "19",
                    "stuGender": "male",
                    "stuScore": "96",
                    "className": "3班"
                }
            ]
        ];

        let table = document.querySelector("table");

        // 1.处理学生数据，把所有学生放在一个数组中
        let studentArr = [];
        for (let i = 0; i < stuInfo.length; i++) {
            studentArr.push(...stuInfo[i]);
        }
        console.log(studentArr);

        // 2.创建表格标题
        table.createCaption().innerText = "学生信息表";

        // 3.创建表头
        table.createTHead();
        // 4.创建表头的行
        table.tHead.insertRow(0);
        // 5.创建表头单元格(学生对象的键名就是表头内容)
        // 遍历第一个学生对象的键名
        let index = 0; //表示单元格下标
        for (let i in studentArr[0]) {
            table.rows[0].insertCell(index).innerText = i;
            index++;
        }
        // 6.创建表体
        table.createTBody();
        // 7.创建表体里面的行
        for (let i = 0; i < studentArr.length; i++) {
            table.tBodies[0].insertRow(i);
            // 创建行里面的单元格
            let index = 0; //表示单元格下标
            for (let x in studentArr[i]) {//x表示键名
                table.tBodies[0].rows[i].insertCell(index).innerText =studentArr[i][x];
                index++;
            }
        }
    </script>
</body>

</html>